<template>
  <section>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="图片" >
          <el-col   v-for="w in goodsfiles">
            <img    v-if="editdialogVisible"  width="148px" height="148px" :src="w" alt="">
          </el-col>
          <el-col  >
            <el-upload  class="upload-demo" action="" list-type = "picture-card" :on-change = "goodsfile" :limit=9 :file-list="ruleForm.goodsfiles" :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary" >选取文件</el-button>
            </el-upload>
          </el-col>

      </el-form-item>


      <el-form-item label="标题" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <el-row>
        <el-col :span="8">
          <el-form-item label="促销价"  >
            <!--prop="salePrice"-->
            <el-input type="salePrice" v-model.number="ruleForm.salePrice" auto-complete="off" style="width: 100%;">元</el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="原价" >
            <!--prop="costPrice"-->
            <el-input type="costPrice" v-model.number="ruleForm.costPrice" auto-complete="off" style="width: 100%;">元</el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!--<el-form-item v-for="(v,k) in value.attrs" :key='k' :label="v.show_name"  >-->
      <!--<el-checkbox-group  v-if="v.type==4" v-model="ruleForm[v.key_name]">-->
      <!--<el-checkbox   v-for ="(cvalue,cind) of v.options" :label="cvalue.value"  :key='cind'></el-checkbox>-->
      <!--</el-checkbox-group>-->


      <el-form-item  v-for=" (v,k) in sizeAarry" :key='k' :label="v" >
        <el-checkbox-group  v-model="ruleForm.type[k]">
          <el-checkbox   v-for=" (cvalue,cind) in colorAarry"  :label="cvalue" :key="cind"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <!--<el-form-item  v-for=" item in sizeAarry" :label="item" >-->
      <!--<el-checkbox-group  v-model="ruleForm.type.item">-->
      <!--<el-checkbox   v-for=" items in colorAarry" v-model="mpb.checked" :label="items" :name="item"></el-checkbox>-->
      <!--</el-checkbox-group>-->
      <!--</el-form-item>-->

      <el-form-item>
        <el-button @click="sizedialog = true">添加尺码</el-button><el-button @click="colordialog = true">添加颜色</el-button>
      </el-form-item>

      <el-form-item label="分类" prop="resource">
        <el-button  @click="typedialog = true">创建分类</el-button>
        <el-radio-group v-for=" item in typeArray"  v-model="ruleForm.resource">
          <el-radio border  :label="item.type" ></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="商品详情展示" >

        <el-col  v-for="w in mainfiles">
          <img    v-if="editdialogVisible"  width="148px" height="" :src="w" alt="">
        </el-col>
        <el-col >
          <el-upload class="upload-demo" action="" list-type = "picture-card" :on-change = "goodspic" :limit=9 :file-list="mainfiles" :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </el-col>

      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">完成</el-button>
      </el-form-item>
    </el-form>

    <el-dialog  :visible.sync="typedialog">
      <el-upload  class="upload-demo" action="" list-type = "picture-card" :on-change = "files" :limit=1 :file-list="fileList" :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      </el-upload>

      <el-form :model="form4" :rules="rules4" ref="form4">
        <el-form-item prop="typename">
          <el-input type="text" v-model="form4.typename" name="typename" auto-complete="off" placeholder="输入类型名称"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="typedialog = false">取 消</el-button>
      <el-button type="primary" @click.native.prevent="addType">确 定</el-button>
    </el-dialog>

    <el-dialog  :visible.sync="sizedialog">
      <el-form :model="form2" :rules="rules2" ref="form2">
        <el-form-item prop="size">
          <el-input type="text" v-model="form2.size" name="size" auto-complete="off" placeholder="输入尺寸"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="sizedialog = false">取 消</el-button>
      <el-button type="primary" @click.native.prevent="sizeNorms">确 定</el-button>
    </el-dialog>

    <el-dialog  :visible.sync="colordialog">
      <el-form :model="form3" :rules="rules3" ref="form3">
        <el-form-item prop="color">
          <el-input type="text" v-model="form3.color" name="color" auto-complete="off" placeholder="输入颜色"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="colordialog = false">取 消</el-button>
      <el-button type="primary" @click.native.prevent="colorNorms">确 定</el-button>
    </el-dialog>
  </section>
</template>

<script>
  import axios from "axios"

  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('价钱不能空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 0) {
              callback(new Error('必须整数'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      return {
        sizeAarry:[],
        colorAarry:[],
        typeArray:[],
        fileList:[],
        mainfiles:[],
        goodsfiles:[],
        sizedialog:false,
        colordialog:false,
        typedialog:false,
        editdialogVisible:true,
        typeparam:'',
        addfrom:new FormData(),
        message:"",
        ruleForm: {
          name: '',
          salePrice:"",
          costPrice:"",
          type: [],
          resource:'',
          desc: '',
          choosesize:[],
          id:"",
          goodsfiles:[],
          mainfiles:[],
        },
        rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 3, max: 60, message: '长度在 3 到 60 个字符', trigger: 'blur' }
          ],
          salePrice: [
            { validator: checkAge, trigger: 'blur' }
          ],
          costPrice: [
            { validator: checkAge, trigger: 'blur' }
          ],
          // type: [
          //   { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          // ],
          resource: [
            { required: true, message: '请选择分类', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        },
        form2:{
          size:''
        },
        rules2: {
          size: [
            { required: true, message: '请填写尺寸', trigger: 'blur' }
          ]
        },
        form3:{
          color:''
        },
        rules3: {
          color: [
            { required: true, message: '请填写颜色', trigger: 'blur' }
          ]
        },
        form4 :{
          typename:''
        },
        rules4:{
          typename: [
            { required: true, message: '请填类型名称', trigger: 'blur' }
          ]
        }
      };
    },
    mounted(){
      this.init()
    },
    methods: {
      submitForm(formName) {
        let ischoose;
        for(var i=0;i<this.sizeAarry.length;i++) {
          if(this.ruleForm.type[i].length > 0) {
            ischoose = true;
            break
          } else {
            ischoose = false;
          }
        }
        if(ischoose){
        this.$refs.ruleForm.validate((valid) => {
          this.addfrom.append('id', this.ruleForm.id);
          this.addfrom.append('name', this.ruleForm.name);
          this.addfrom.append('salePrice', this.ruleForm.salePrice);
          this.addfrom.append('costPrice', this.ruleForm.costPrice);
          //this.addfrom.append('type', this.ruleForm.type);
          this.addfrom.append('resource', this.ruleForm.resource);
          this.addfrom.append('desc', this.ruleForm.desc);

          this.ruleForm.goodsfiles.forEach((val, ind) => {
            console.log(val.raw);
            this.addfrom.append('goodsfiles', val.raw);
          });

          this.ruleForm.mainfiles.forEach((val, ind) => {
            console.log(val.raw);
            this.addfrom.append('mainfiles', val.raw);
          });
          this.sizeAarry.forEach((val, ind) => {
            if (this.ruleForm.type[ind].length > 0) {
              this.addfrom.append(val, this.ruleForm.type[ind]);
              //选择的size
              this.addfrom.append("choosesize", this.ruleForm.choosesize[ind] = val);
            }

          })

          if (valid) {
            let config = {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }
            //console.log(this.addfrom)
            axios.post("/goodslist/editGoods", this.addfrom, config).then((ress) => {
              let res = ress.data;
              if (res.status == "0") {
                this.$router.push({path: '/goodsCenter/goodsList.vue'})
              } else {

              }
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
        }else{
          this.message = "请选择尺码！";
          this.open();
        }
      },
      open() {
        this.$message(this.message);
      },
      mainfile(){

      },
      goodsfile(file,fileList){
        //goodsfiles
        this.ruleForm.goodsfiles=fileList;

        console.log(fileList);

        //this.addfrom.append('goodsfile', file.raw);
      },
      goodspic(file,fileList){
        this.ruleForm.mainfiles=fileList;
        //console.log(this.mainfiles)
        //this.addfrom.append('mainfiles', this.mainfiles);
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      init(){
        var editGoods = this.$route.query.row;

        console.log(editGoods)

        editGoods.goodsfiles.forEach((val,ind)=>{
          this.goodsfiles[ind] = val
        })

        editGoods.mainfiles.forEach((val,ind)=>{
          this.mainfiles[ind] = val
        })

        // res.size.forEach((val,ind)=>{
        //   editGoods.choosesize.forEach((val2,ind2)=>{
        //   console.log(val == val2)
        //   console.log(editGoods.norms[val2+""])
        //     if(val == val2){
        //       this.$set(this.ruleForm.type, ind2, [editGoods.norms[val2+""].val]);
        //     }
        //       this.$set(this.ruleForm.type, ind, []);
        //   })
        // })

        axios.get("/goodslist/getNorms").then((response)=>{
          let res = response.data.result.list[0];
          this.sizeAarry = res.size;
          this.colorAarry = res.color;
          for (var a = res.size, i = 0; i < a.length; i++){
            this.$set(this.ruleForm.type, i, []);
              for (var b = editGoods.choosesize, q = 0; q < b.length; q++) {
                if(a[i] == b[q]) {
                  this.$set(this.ruleForm.type, i, editGoods.norms[q].val);
                }
            }
          }
        })

        axios.get("/typelist/getType").then((response)=>{
          let res = response.data;
          this.typeArray = res.result.list;
        })

        this.ruleForm={
          name: editGoods.goodName,
          salePrice:editGoods.salePrice,
          costPrice:editGoods.costPrice,
          type: [],
          resource:editGoods.type,
          desc: '',
          choosesize:[],
          id:editGoods._id
        }
      },
      sizeNorms(){
        this.$refs.form2.validate((valid) => {
          if (valid) {
            axios.post("/goodslist/addNorms",{
              size: this.form2.size,
            }).then((ress)=> {
              let res = ress.data;
              if (res.status == "0") {

              } else {

              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      colorNorms(){
        this.$refs.form3.validate((valid) => {
          if (valid) {
            axios.post("/goodslist/addNorms",{
              color : this.form3.color,
            }).then((ress)=> {
              let res = ress.data;
              if (res.status == "0") {

              } else {

              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      files(file, fileList){
        this.typeparam = new FormData();
        //console.log(file)
        this.typeparam.append('image', file.raw);
      },
      addType() {
        this.$refs.form4.validate((valid) => {
          this.typeparam.append('typename', this.form4.typename);
          let config = {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
          //console.log(this.param)
          axios.post("/typelist/addType",this.typeparam ,config).then((ress)=>{
            let res = ress.data;
            if(res.status == "0"){

            }else{

            }
          })
        })
      },
    }
  }
</script>

<style  lang="scss" scoped>
  .lookpic{
    display: inline-block;
  }
  .choose{
    display: inline-block;
  }
  .buttom{
    margin-left: 100px;
  }
  .el-form{
    margin-top: 20px;
  }
  .el-radio{
    margin-right: 10px;
  }
</style>
